<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint>
	<head>
		<meta charset="utf-8">
		<title>预览word</title>
		
		<script src="./utils/flexible.js"></script>
		<script src="./word/jszip.min.js" ></script>
		<script src="./word/docx-preview.min.js" ></script>
		<script src="./utils/getQueryVariable.js"></script>
	</head>
	
	<style type="text/css">
		*{padding: 0;margin: 0;}
		body {
			height: 100vh;
			/* width: 100vw; */
		}
		#container {
			width: 100%;
			height: 100%;
		}
		.office-docx{
			height:100%;
			overflow-y:auto;
		}
		.office-docx .docx-wrapper>section.docx{
			margin-bottom:5px;
		}
		@media screen and (max-width: 800px){
			.office-docx .docx-wrapper{
				padding:10px;
			}
			.office-docx .docx-wrapper>section.docx{
				padding:10px !important;
				width:100% !important
			}
		}
	</style>
	
	<script>
		function fetchBlobFromUrl(blobUrl) {
		  return new Promise((resolve, reject) => {
		    const xhr = new XMLHttpRequest();
		    xhr.open('GET', blobUrl, true);
		    xhr.responseType = 'blob';
		    xhr.onload = function () {
		      if (xhr.status === 200) {
		        resolve(xhr.response);
		      } else {
		        reject(new Error(`Failed to fetch blob: ${xhr.statusText}`));
		      }
		    };
		    xhr.onerror = function (err) {
		      reject(new Error(err));
		    };
		    xhr.send();
		  });
		}

	    
			(async function () {
				const fileUrl = decodeURIComponent(getQueryVariable('file') || '')
				const blob = await fetchBlobFromUrl(fileUrl);
				// console.log(11, blob)
				// const blob = await response.blob()
				
				docx.renderAsync(blob, document.getElementById("body"), document.getElementById("container"),{
					className: "office-docx", // string：默认和文档样式类的类名/前缀
					inWrapper:  true, // boolean：启用围绕文档内容的包装器渲染
					ignoreWidth: false, // boolean：禁用页面的渲染宽度
					ignoreHeight: false, // boolean：禁止渲染页面高度
					ignoreFonts: false, // boolean：禁用字体渲染
					breakPages: true, // boolean：在分页符上启用分页
					ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
					experimental: false, // boolean：启用实验功能（制表符停止计算）
					trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xml 文档中移除 xml 声明
					useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
					useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
					showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
					debug: false, // boolean：启用额外的日志记录
				}).then(x => console.log("docx: finished"));
			}())
	</script>
	
	<body id="body">
		<div id="container"></div>
	</body>
	
	
	
</html>

